<template>
  <div>
    <!-- <p>formDis:{{ formDis }}goodsGalleryPojos</p>
    <p>isEdit:{{ isEdit }}</p> -->
    <!-- {{ prductForm }} -->
    <h3 class="title">
      <span v-if="formDis ===false && isEdit === false">新增房型</span>
      <span v-if="isEdit === true">编辑房型</span>
      <span v-if="formDis === true">查看详情</span>
    </h3>
    <el-form
      ref="prductForm"
      :disabled="formDis"
      :model="prductForm"
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
      style="margin-top: 20px;">
      <el-form-item :prop="formDis?'':'roomGoodsName'" label="房型名称">
        <el-col :span="8" >
          <el-input
            v-model="prductForm.roomGoodsName"
            placeholder="请输入房型名称"
            type="text"
            maxlength="50"
            show-word-limit
          />
        </el-col>
      </el-form-item>
      <el-form-item :prop="formDis?'':'roomTypeId'" label="房型类型">
        <el-col :span="8" >
          <el-select v-model="prductForm.roomTypeId" :placeholder="formDis?'':'请选择房型类型'" style="width:100%" class="type">
            <el-option v-for="item in categoryList" :key="item.id" :label="item.typeName" :value="item.id" />
          </el-select>
        </el-col>
      </el-form-item>

      <el-form-item :prop="formDis?'':'unit'" label="单位">
        <el-col :span="8" >
          <el-input
            ref="unit"
            v-model="prductForm.unit"
            :value="prductForm.unit"
            type="text"
            placeholder="请输入单位"
            maxlength="10"
            @input="replaceInput('prductForm', 'unit', prductForm.unit)" />
        </el-col>
      </el-form-item>

      <el-form-item :class="formDis?'':'add_tip'" label="缩略图" prop="'cost'">
        <el-col :span="24" >
          <div style="width:302px" class="fl">
            <div class="thumbnail">
              <img v-show="prductForm.picUrl" :src="prductForm.picUrl" alt="">
            </div>
            <div v-if="!formDis" class="uploadBox">
              <el-upload
                ref="picUpload"
                :before-remove="beforeRemove"
                :before-upload="beforeAvatarUpload"
                :on-success="(file, filelist) => change('coverImg', file, filelist)"
                :limit="1"
                :on-exceed="handleExceed"
                :file-list="fileList1"
                :data="SLTData"
                :action="thumbnailsUrl"
                :with-credentials= "false"
                :model="prductForm.picUrl"
                multiple
                class="upload-demo fl"
                accept=".jpg,.jpeg,.png,.JPG,.JPEG,.gif,.Gif">
                <el-button size="small" type="primary">选择图片</el-button>
              </el-upload>
              <el-button v-show="prductForm.picUrl" class="btn_clear fr" size="small" type="info" @click="clearPic()">清除</el-button>
            </div>
          </div>
          <div class="fl tipBox">
            <p slot="tip" class="el-upload__tip">只能上传jpg/jpeg/png/gif文件</p>
            <!-- <p class="tip">为保证前台商品图片展示效果，请上传800*600的商品图片</p> -->
          </div>
        </el-col>
      </el-form-item>

      <hr>
      <!-- {{ prductForm.goodsGalleryPojos }} -->
      <el-form ref="imgsCurData" :disabled="formDis" :inline="false" :model="imgsCurData" :rules="imgRules" label-width="120px" class="demo-prductForm">
        <div v-if="!formDis">
          <el-row>
            <el-col :span="5">
              <el-form-item class="add_tip" prop="url" label="轮播图片管理">
                <el-upload
                  :before-remove="beforeRemove"
                  :before-upload="beforeAvatarUploadLbImg"
                  :on-success="(file, filelist) => change('lbImg', file, filelist)"
                  :on-exceed="handleExceed"
                  :file-list="fileList"
                  :data="LBTData"
                  :action="thumbnailsUrl"
                  v-model="imgsCurData.url"
                  :with-credentials= "false"
                  :show-file-list="false "
                  :loading="isUpload"
                  :disabled="prductForm.goodsGalleryPojos.length==5"
                  multiple
                  class="upload-demo"
                  accept=".jpg,.jpeg,.png,.JPG,.JPEG,.gif,.Gif">
                  <!-- {{ prductForm.goodsGalleryPojos }} -->
                  <div class="lbImgBox">
                    <el-button :disabled="prductForm.goodsGalleryPojos.length==5" class="fl" size="small" type="primary">点击上传</el-button>
                    <div v-if="prductForm.goodsGalleryPojos.length<5" class="lbImgCon fr">
                      <img :src="lbImgPath" class="lbImgPath" alt="">
                    </div>
                  </div>
                  <span class="el-upload__tip" style="height:20px;line-height:20px; margin-left:-100px;">最多上传5张图片, 图片尺寸建议335*160</span>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item class="add_tip" prop="picName" label="图片名称">
                <el-input ref="picName" v-model="imgsCurData.picName" maxlength="20" type="text" placeholder="请输入图片名称" @input="replaceInput('imgsCurData', 'picName', imgsCurData.picName)"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="">
                <el-button :disabled="isUpload" size="medium" type="primary" @click="addImg('imgsCurData')">添加</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <span v-if="formDis" class="lbTitle">轮播图片管理</span>
        <el-row>
          <el-col :span="22" align="center">
            <el-table
              v-loading="listLoading"
              v-if="prductForm.goodsGalleryPojos.length"
              :data="prductForm.goodsGalleryPojos"
              style="margin-left:5%"
              element-loading-text="加载中请稍后"
              border
              fit
              highlight-current-row>
              <el-table-column align="center" label="序号" width="60">
                <template slot-scope="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column label="图片">
                <template slot-scope="scope">
                  <img :src="scope.row.url" alt="" style="width:50px">
                  <!-- {{ scope.row.curPath | levelStr }} -->
                </template>
              </el-table-column>
              <el-table-column label="名称">
                <template slot-scope="scope">
                  {{ scope.row.picName }}
                </template>
              </el-table-column>
              <el-table-column v-if="!formDis" align="center" prop="created_at" label="操作" width="240">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="success"
                    @click="move(scope.$index, 'up')">上移</el-button>
                  <el-button
                    size="mini"
                    type="success"
                    @click="move(scope.$index, 'down')">下移</el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="deleteFn(scope.$index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-form>
      <hr>

      <el-form-item :prop="formDis?'':'retailPrice'" label="门市价(元)">
        <el-col :span="8" >
          <el-input v-model="prductForm.retailPrice" maxlength="8" type="text" placeholder="请输入门市价" />
        </el-col>
      </el-form-item>
      <el-form-item :prop="formDis?'':'salePrice'" label="销售价(元)">
        <el-col :span="8" >
          <el-input v-model="prductForm.salePrice" maxlength="8" type="text" placeholder="请输入销售价" />
        </el-col>
      </el-form-item>
      <!-- {{ prductForm.saleRebate }} -->
      <!-- <el-form-item label="分销返点" prop="saleRebate">
        <el-row>
          <el-col :span="8" >
            <el-input v-model="prductForm.saleRebate" class="fl" placeholder="请输入 0 - 99 之间的数字" />
          </el-col>
          <el-col :span="2"> &nbsp;%</el-col>
        </el-row>
      </el-form-item> -->
      <!-- <el-form-item label="库存" prop="totalStock">
        <el-col :span="8" >
          <el-input v-model="prductForm.totalStock" maxlength="8" type="text" placeholder="请输入库存" />
        </el-col>
      </el-form-item> -->
      <!-- {{ prductForm.leastQuantity }} -->
      <el-form-item label="最少购买数量" prop="leastQuantity">
        <el-col :span="8" >
          <el-input v-model="prductForm.leastQuantity" maxlength="8" type="text" placeholder="请输入最少购买数量" />
        </el-col>
      </el-form-item>
      <!-- {{ prductForm.largestQuantity }} -->
      <el-form-item label="最大购买数量" prop="largestQuantity">
        <el-col :span="8" >
          <el-input v-model="prductForm.largestQuantity" maxlength="8" type="text" placeholder="请输入最大购买数量" />
        </el-col>
      </el-form-item>
      <!-- 数据同步实时更新需要下面这个span ？ -->
      <span style="display:none">{{ prductForm.vipGoodsAttributes }}</span>
      <!-- {{ prductForm.vipGoodsAttributes }}
      {{ testDiscount }}
      {{ testRebate }} -->
      <!-- {{ momList[0] }} -->
      <!-- {{ prductForm.isDiscount }} -->
      <!-- <el-form-item label="是否有会员折扣" prop="isDiscountCheck">
        <el-col :span="8.6" >
          <table style="width:100%">
            <tr>
              <td>
                <el-radio v-model="prductForm.isDiscount" :label="0" @change="isDisCount('discount')">不支持</el-radio>
                <el-radio v-model="prductForm.isDiscount" :label="1">支持</el-radio>
              </td>
            </tr>
            <tr>
              <td>
                <table v-if="prductForm.isDiscount == 1" class="table" style="width:100%">
                  <tr v-for="(item, index) in momList" :key="item.id">
                    <td>
                      <el-checkbox
                        v-model="isDiscountCheck[index]"
                        @change="vipGoodCheck(isDiscountCheck[index], index, item, 'discount')">
                        {{ item.name }}
                      </el-checkbox>
                      <el-input
                        v-if="discountList.length"
                        :style="{'margin-left':(index == 0 ? '22px': '8px')}"
                        :disabled="!isDiscountCheck[index]"
                        v-model="item.discount"
                        :class="{'discontIpt': true, 'redBroder':!testDiscount[index]}"
                        placeholder="请输入0 - 9.9之间的数"
                        @input="vipGoodChange(item, index, 'discount')"
                        @blur="testDR(item, index, 'discount')"
                      /> 折
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </el-col>
      </el-form-item>

      <el-form-item :class="formDis?'':'add_tip'" label="会员复利返点" prop="'isMemberRebate'">
        <el-col :span="8.6" >
          <table style="width:100%">
            <tr>
              <td>
                <el-radio v-model="prductForm.isMemberRebate" :label="0" @change="isDisCount('rebate')">不支持</el-radio>
                <el-radio v-model="prductForm.isMemberRebate" :label="1">支持</el-radio>
              </td>
            </tr>
            <tr>
              <td>
                <table v-if="prductForm.isMemberRebate == 1" class="table" style="width:100%">
                  <tr v-for="(item, index) in momList" :key="item.id">
                    <td>
                      <el-checkbox
                        v-model="isRebateChecks[index]"
                        @change="vipGoodCheck(isRebateChecks[index], index, item, 'rebate')">
                        {{ item.name }}
                      </el-checkbox>
                      <el-input
                        v-if="discountList.length"
                        :style="{'margin-left':(index==0? '20px': '8px')}"
                        v-model="item.rebate"
                        :disabled="!isRebateChecks[index]"
                        :class="{'discontIpt': true, 'redBroder':!testRebate[index]}"
                        placeholder="请输入0 - 99之间的数"
                        @input="vipGoodChange(item, index, 'rebate')"
                        @blur="testDR(item, index, 'rebate')"
                      /> &nbsp;%
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </el-col>
      </el-form-item> -->
      <el-form-item :prop="formDis?'':'detail'" :class="formDis?'':'add_tip'" label="商品详情" class="">
        <div style="width:98%">
          <div v-if="formDis" class="tin_box" v-html="prductForm.detail" />
          <tinymce v-else v-model="prductForm.detail" :height="150" :disabled="tinymceDis" :value="prductForm.detail" />
        </div>
      </el-form-item>
      <el-form-item :prop="formDis?'':'buyNotes'" label="购买须知">
        <div style="width:98%">
          <div v-if="formDis" class="tin_box" v-html="prductForm.buyNotes" />
          <tinymce v-else v-model="prductForm.buyNotes" :height="150" :disabled="tinymceDis" />
        </div>
        <!-- <div v-if="formDis" class="tin_box" v-html="prductForm.buyNotes" />
        <tinymcee v-else v-model="prductForm.buyNotes" :height="150" :disabled="tinymceDis" /> -->
      </el-form-item>
      <el-form-item label="温馨提示" prop="tips">
        <div style="width:98%">
          <div v-if="formDis" class="tin_box" v-html="prductForm.tips" />
          <tinymce v-else v-model="prductForm.tips" :height="150" :disabled="tinymceDis" />
        </div>
      </el-form-item>
      <!-- <el-form-item label="商品排序" prop="sortOrder">
        <el-col :span="8" >
          <el-input v-model="prductForm.sortOrder" maxlength="5" type="text" placeholder="请输入商品排序" />
        </el-col>
      </el-form-item> -->
      <el-form-item :prop="formDis?'':'saleStatus'" label="商品状态">
        <el-col :span="8" >
          <el-select v-model="prductForm.saleStatus" style="width:100%" placeholder="请选择">
            <el-option :value="0" label="下架"/>
            <el-option :value="1" label="上架"/>
          </el-select>
        </el-col>
      </el-form-item>
      <!-- {{ prductForm.postage }}
      {{ prductForm.refundType }} -->
      <el-form-item :class="formDis?'':'add_tip'" label="是否支持退款" prop="postage">
        <el-col :span="24" >
          <table class="table">
            <tr>
              <td>
                <el-radio v-model="prductForm.refundType" :label="0" @change="clearTime">不支持</el-radio>
                <el-radio v-model="prductForm.refundType" :label="1">入住当天</el-radio>
                <div style="display:inline-block; margin-left:20px;">
                  <el-input
                    :disabled="prductForm.refundType == 0"
                    v-model="prductForm.refundDay"
                    type="text"
                    style="width:100px"
                    maxlength="5"
                    @blur="FreePostage(prductForm.refundDay)" />&nbsp;天前
                  <el-select
                    v-model="prductForm.refundHour"
                    :disabled="prductForm.refundType == 0"
                    class="timeNum">
                    <el-option v-for="index in 23" :key="index" :lable="index" :value="index" placeholder="请选择"/>
                  </el-select>
                  点前可退款
                </div>
              </td>
            </tr>
            <!-- <tr>
              <td>开具发票</td>
              <td>
                <el-radio v-model="prductForm.isInvoice" :label="1">不支持</el-radio>
                <el-radio v-model="prductForm.isInvoice" :label="0">支持</el-radio>
              </td>
            </tr>
            <tr>
              <td>商品退款</td>
              <td>
                <el-radio v-model="prductForm.refundType" :label="1">不支持</el-radio>
                <el-radio v-model="prductForm.refundType" :label="0">支持</el-radio>
              </td>
            </tr> -->
          </table>
        </el-col>
      </el-form-item>
      <!-- {{ prductForm.refundDay }} -->
      <el-form-item>
        <!-- 编辑 -->
        <el-button v-preventReClick v-if="isEdit" type="primary" @click="submitForm('prductForm')">确定</el-button>
        <!-- 新增 -->
        <el-button v-preventReClick v-if="!isEdit && !formDis" type="primary" @click="submitForm('prductForm')">确定</el-button>
        <!-- 取消 -->
        <el-button v-preventReClick v-if="!formDis" :disabled="false" @click="$router.go(-1)">关闭</el-button>
      <!-- <el-button @click="resetForm('prductForm')">重置</el-button> -->
      </el-form-item>

    </el-form>
    <div class="bottomDiv">
      <el-button v-preventReClick v-if="formDis" @click="$router.go(-1)">关闭</el-button>
    </div>

  </div>
</template>

<script>
import config from '@/utils/config';
import { checkPhone, checkIdCard, checkEmail } from '@/utils/regUtil';
import { checkNotEmail, checkNum, checkStudentNum } from '@/utils/validateUtil';
import Tinymce from '@/components/Tinymce'
import { GetQiniuToken } from '@/utils/qiniuUpload.js'
import { Message } from 'element-ui'
import { categoryQuery } from '@/api/product'
// import mixin from '@/mixin'
import { addRoom, checkRoomInfo, editRoom, getRoomListType } from '@/api/hotel'

const validatePass = (rule, value, callback) => {
  if (!value) {
    callback(new Error('请输入新密码'));
  } else if (value.toString().length < 6 || value.toString().length > 100) {
    callback(new Error('密码长度为6 - 100个字符'))
  } else {
    callback();
  }
};

const validatephone = (rule, value, callback) => {
  if (!checkPhone(value)) {
    callback(new Error())
  }
  callback()
};
const validateIdCard = (rule, value, callback) => {
  if (!checkIdCard(value)) {
    callback(new Error())
  }
  callback()
};
const validateMail = (rule, value, callback) => {
  if (!checkNotEmail(value)) {
    callback(new Error())
  }
  callback()
};
const validateStudentNum = (rule, value, callback) => {
  if (!checkStudentNum(value)) {
    callback(new Error())
  }
  callback()
};

const validateStudentNumber = (rule, value, callback) => {
  if (value.length > 5) {
    callback(new Error())
  }
  callback()
};

const validateNum = (rule, value, callback) => {
  if (!checkNum(value)) {
    callback(new Error())
  }
  callback()
};

export default {
  components: { Tinymce },
  // mixins: [mixin],
  data() {
    // leastQuantity: '', // 限制购买数量
    // largestQuantity: '', // 最大购买数量
    const validateBigBuyNum = (rule, value, callback) => {
      if (!value || !this.prductForm.leastQuantity) {
        return callback();
      } else if (this.prductForm.leastQuantity !== '' && Number(value) < Number(this.prductForm.leastQuantity)) {
        callback(new Error('最大购买数量必须大于最少购买数量'));
      } else {
        callback();
        this.$refs.prductForm.clearValidate('leastQuantity')
      }
    //   if (this.prductForm.leastQuantity !== '' && Number(value) < Number(this.prductForm.leastQuantity)) {
    //     callback(new Error('最大购买数量必须大于最少购买数量'));
    //   } else {
    //     callback();
    //     this.$refs.prductForm.clearValidate('leastQuantity')
    //   }
    };
    const validateSmallBuyNum = (rule, value, callback) => {
      console.log('value:', value)
      console.log('largestQuantity:', this.prductForm.largestQuantity)
      if (!value || !this.prductForm.largestQuantity) {
        return callback();
      } else if (this.prductForm.largestQuantity !== '' && Number(value) > Number(this.prductForm.largestQuantity)) {
        callback(new Error('最少购买数量必须小于最大购买数量'));
      } else {
        callback();
        this.$refs.prductForm.clearValidate('largestQuantity')
      }

    //   console.log('this.prductForm.largestQuantity:', Number(this.prductForm.largestQuantity))
    //   if (this.prductForm.largestQuantity !== '' && Number(value) > Number(this.prductForm.largestQuantity)) {
    //     callback(new Error('最少购买数量必须小于最大购买数量'));
    //   } else {
    //     callback();
    //     this.$refs.prductForm.clearValidate('largestQuantity')
    //   }
    };
    return {
      categoryList: [], //  获取所有分类信息
      momList: [],
      // picUrlCurPath: '',
      imgsCurData: {
        url: '',
        picName: ''
      },
      isDiscountCheck: [false, false, false, false],
      isRebateChecks: [false, false, false, false],
      isUpload: true, // 控制轮播图按钮
      prductForm: {
        roomGoodsName: '', // 房间名称
        roomTypeId: '', // 房型类型
        unit: '', // 单位
        picUrl: '', // 缩略图
        goodsGalleryPojos: [], // 轮播图
        retailPrice: '', // 门市价
        salePrice: '', // 销售价
        saleRebate: '', // 分销返点
        totalStock: '', // 库存
        leastQuantity: '', // 限制购买数量
        largestQuantity: '', // 最大购买数量
        isDiscount: 1, // 是否有会员折扣  0：不支持  1：支持
        isMemberRebate: 1, // 会员复利返点 0：不支持  1：支持
        vipGoodsAttributes: [],
        // vipGoodsAttributes: [
        // //   { 'id': 45, 'goodsId': 16, 'vipId': 1, 'discount': 0.1, 'rebate': null },
        // //   { 'id': 46, 'goodsId': 16, 'vipId': 4, 'discount': null, 'rebate': 0.5 }
        // //   { 'vipId': 3, 'discount': 0.3, 'rebate': 0.3 },
        // //   { 'vipId': 4, 'rebate': 0.4 }
        // ],
        detail: '', // 商品详情
        buyNotes: '', // 购买须知
        tips: '', // 温馨提示
        sortOrder: 0, // 商品排序
        saleStatus: 0, // 商品状态
        // 商品属性
        refundType: 1, // 退款类型(0:不支持退款;1:支持7天无理由退款；)
        refundDay: '', // 几天前
        refundHour: '' // 几点前
      },
      radios: {
        free: 0, // 免邮费
        freeCost: '',
        invoice: 0, // 开具发票
        refund: 0 // 商品退款
      },
      list: [],
      discountList: [],
      listLoading: false,
      teacher: [],
      isWatch: false,
      lbImgPath: '',
      imgRules: {
        url: [
          { required: true, message: '请选择一张图片', trigger: 'blur' }
        ],
        picName: [
          { required: true, message: '请输入与图片相对应的名称', trigger: 'blur' },
          { max: 20, message: '输入字符不得超过20个', trigger: 'blur' },
          { pattern: /^[A-z0-9\u4e00-\u9fa5]*$/, message: '不能含有特殊字符', trigger: 'blur' }
        ]
      },
      rules: {
        refundDay: [
          { required: true, message: '请输入天数', trigger: 'blur' }
        ],
        roomGoodsName: [
          { required: true, message: '请填写房型名称', trigger: 'blur' }
        //   { pattern: /^[A-z0-9\u4e00-\u9fa5]*$/, message: '不能含有特殊字符', trigger: 'blur' }
        ],
        roomTypeId: [
          { required: true, message: '请选择房型类型', trigger: 'change' }
        ],
        unit: [
          { required: true, message: '请填写单位', trigger: 'change' },
          { pattern: /^[A-z0-9\u4e00-\u9fa5]*$/, message: '不能含有特殊字符', trigger: 'blur' }
        ],
        retailPrice: [
          { required: true, message: '请填写门市价', trigger: 'blur' },
          // { pattern: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/, message: '请输入正确数值,需大于0', trigger: 'blur' },
          { pattern: /^(\d+)(.\d{0,2})?$/, message: '请输入正确的数字，并且小数点后最多保留两位数字', trigger: 'blur' }
          // { validator: validateNum, message: '请输入数字', trigger: 'blur' }
        ],
        salePrice: [
          { required: true, message: '请填写销售价', trigger: 'blur' },
          //  { pattern: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/, message: '数值需大于0', trigger: 'blur' },
          { pattern: /^(\d+)(.\d{0,2})?$/, message: '请输入正确的数字，并且小数点后最多保留两位数字', trigger: 'blur' }
        ],
        saleRebate: [
          { required: false, message: '请填写分销返点', trigger: 'blur' },
          { pattern: /^([1-9]\d|\d)$/, message: '请输入0 - 99之间的正整数数字', trigger: 'blur' }
        //   { pattern: /^\d{1,2}$/, message: '请输入0-99之间的正整数', trigger: 'blur' }
        ],
        totalStock: [
          { required: true, message: '请填写库存', trigger: 'blur' },
          { pattern: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/, message: '数值需大于0', trigger: 'blur' },
          { validator: validateStudentNum, message: '请输入整数', trigger: 'blur' }
        ],
        leastQuantity: [
          { required: false, message: '请填写最少购买数量', trigger: 'blur' },
          { pattern: /^[0-9]+\d*$/, message: '请输入正整数', trigger: 'blur' },
          { validator: validateSmallBuyNum, message: '', trigger: 'blur' }
        ],
        largestQuantity: [
          { required: false, message: '请填写最大购买数量', trigger: 'blur' },
          { pattern: /^[0-9]+\d*$/, message: '请输入正整数', trigger: 'blur' },
          { validator: validateBigBuyNum, message: '', trigger: 'blur' }
        ],
        sortOrder: [
          { required: false, message: '', trigger: 'blur' },
          { pattern: /^[0-9]+\d*$/, message: '请输入正整数', trigger: 'blur' },
          { validator: validateStudentNum, message: '请输入正整数', trigger: 'blur' }
        ],
        saleStatus: [
          { required: true, message: '请选择商品状态', trigger: 'change' }
        ],
        discount: [
          { required: true, message: '----', trigger: 'change' },
          { pattern: /^(\d+)(.\d{0,2})?$/, message: '请输入正确的数字，并且小数点后最多保留两位数字', trigger: 'blur' }
        ]
      },
      fileList1: [], // 缩略图
      fileList: [],
      actionUrl: config.BaseUrl + '/storage/create',
      thumbnailsUrl: config.BaseUrl + '/storage/create/thumbnails',
      uploadData: {
        key: '',
        token: ''
      },
      SLTData: {
        maxWidth: 320
      },
      LBTData: {
        maxWidth: 1080
      },
      formDis: false,
      tinymceDis: false,
      isEdit: false,
      selectShow: false,
      myProduct: {},
      // 对应<请选择讲师下拉菜单>查询教师信息列表时，把status为1的教师获取出来
      listQuery: {
        pageNum: 0,
        pageSize: 1000,
        status: 1
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        }
      },
      isDisabled: false,
      testDiscount: [],
      testRebate: []
    }
  },
  computed: {
    ruleForm: function() {
      return this.$store.getters.ruleForm
    }
  },
  watch: {
    // ruleForm: {
    //   handler: function(nowVal, oldVal) {
    //     this.$store.dispatch('AddlistenForm', this.ruleForm).then(() => {
    //     }).catch((err) => {
    //       Message.error(err.err)
    //     })
    //   },
    //   deep: true
    // }
    // 'prductForm': {
    //   handler: function(nowVal, oldVal) {

    //   },
    //   deep: true
    // }
  },
  created() {
    // 获取美妈类别 并且判断谁为选中，百分比为多少
    // this.getMomList()
    // 获取折扣信息
    // this.getConstantPercent()
    // 获取可用分类信息
    this.getCategory()
    // 获取所有分类信息
    // this.getCategoryAll()
  },
  mounted() {
    const _self = this;
    console.log('this.$route.query:', JSON.stringify(this.$route.query))
    if (this.$route.query && JSON.stringify(this.$route.query) !== '{}') {
      console.log(this.$route.query)
      this.isEdit = this.$route.query.hasOwnProperty('isEdit') ? _self.$route.query.isEdit : false;
      this.formDis = Boolean(this.$route.query.isLook)
      this.tinymceDis = Boolean(this.$route.query.isLook)
      const a = this.$route.query
      if (a.hasOwnProperty('isLook')) {
        // this.dataToHtml(a)
        this.getProductListFn(a.id)
        this.selectShow = true
        delete a.isLook;
      }
      if (a.hasOwnProperty('isEdit')) {
        // this.dataToHtml(a)
        // this.getTeacherList()
        this.getProductListFn(a.id)
        delete a.isEdit;
      }
    //   this.$store.dispatch('AddlistenForm', this.$route.query).then(() => {
    //   }).catch((err) => {
    //     Message.error(err.err)
    //   })
    } else { // 新增
    //   this.getTeacherList()
    //   this.$store.dispatch('resetFunc').then(() => {
    //   }).catch((err) => {
    //     Message.error(err.err)
    //   })

    }

    // this.uploadData.token = GetQiniuToken().uploadToken
  },
  methods: {

    // 点击不支持清空支持的条件
    clearTime() {
      this.prductForm.refundDay = ''
      this.prductForm.refundHour = ''
    },
    // 将折扣x10和返利x100
    // formatDR(arr) {
    //   arr.forEach((item, index) => {
    //     // console.log('我是每一项', item)
    //     if (item.discount) item.discount = Math.round((item.discount * 10))
    //     if (item.rebate) item.rebate = Math.round((item.rebate * 100))
    //   })
    //   return arr
    // },
    // restoreDR(arr) {
    //   arr.forEach((item, index) => {
    //     // console.log('我是每一项', item)
    //     if (item.discount) item.discount = item.discount / 10
    //     if (item.rebate) item.rebate = item.rebate / 100
    //   })
    //   return arr
    // },
    FreePostage(value) {
      if (this.prductForm.refundDay) {
        // /^(\d+)(.\d{0,2})?$/
        // const reg = /^(([1-9]{}\d*)|(0{1}))(\.\d{2})$/.test(this.prductForm.postage)
        const reg = /^([1-9]\d|\d)$/.test(this.prductForm.refundDay)
        console.log(reg)
        if (!reg) {
          Message.error('请输入正整数')
          return false
        }
      }
    },
    // 特殊字符自动校验过滤
    replaceInput(form, name, val) {
      // console.log(val)
      // console.log(this.$refs[name].value)
      this[form][name] = this.validForbid(val)
      // obj = this.validForbid(value)
    },
    // 获取所有分类信息 - 可用状态
    getCategory() {
      getRoomListType(this.listQuery).then(res => {
        console.log('获取所有分类信息:', res)
        if (res.code === '200') {
          this.categoryList = res.data.list
        }
      })
    },

    // 获取所有分类信息 - 全部状态
    // getCategoryAll() {
    //   getRoomListType({ pageNum: 0, pageSize: 1000 }).then(res => {
    //     console.log('查看时获取所有分类信息:', res)
    //     if (res.code === '200') {
    //       this.categoryList = res.data.list
    //     }
    //   })
    // },
    // isDisCount(type) {
    //   const vipGoods = this.prductForm.vipGoodsAttributes
    //   // if (!vipGoods.length) return false
    //   // console.log('momList::', this.momList)
    //   // console.log('vipGoods::', vipGoods)
    //   for (let j = 0; j < this.momList.length; j++) {
    //     delete this.momList[j][type]
    //     // this.momList[j][type] = ''
    //     if (type === 'discount') this.isDiscountCheck[j] = false
    //     if (type === 'rebate') this.isRebateChecks[j] = false
    //   }
    //   // console.log('vipGoods.length:::::::', vipGoods.length)
    //   for (let i = 0; i < vipGoods.length; i++) {
    //     if (vipGoods[i][type]) delete vipGoods[i][type]
    //     if (!vipGoods[i].discount && !vipGoods[i].rebate) {
    //       vipGoods.splice(i, 1)
    //       i--
    //     }
    //   }
    //   this.prductForm.vipGoodsAttributes = vipGoods
    // },
    // 当第N个折扣与返点都不存在都时候干掉数据里的第N项
    vipGoodCheck(ischecked, index, item, type) {
      const vipGoods = this.prductForm.vipGoodsAttributes
      // 取消美妈checkbox
      if (ischecked === false) {
        if (type === 'discount') {
          this.$set(this.testDiscount, index, true)
        }
        if (type === 'rebate') {
          this.$set(this.testRebate, index, true)
        }
        if (vipGoods.length > 0) {
          if (item[type]) item[type] = ''
          const i = vipGoods.findIndex(val => val.vipId === item.id)
          console.log(i)
          if (i !== -1) {
            if (this.momList[i][type]) this.momList[i][type] = ''
            delete vipGoods[i][type]
            if (!vipGoods[i].discount && !vipGoods[i].rebate) vipGoods.splice(i, 1)
          }
          this.prductForm.vipGoodsAttributes = vipGoods
        }
      }
    },
    // testDR(item, index, type) {
    //   let reg
    //   if (type === 'discount') {
    //     reg = /^(?=0\.[0-9]|[0-9]\.\d).{3}$|^([0-9])$/
    //     const re = new RegExp(reg);
    //     if (re.test(item.discount)) {
    //       // console.log(index, '1正确')
    //       this.$set(this.testDiscount, index, true)
    //       // this.testDiscount[index] = true
    //       return true
    //     } else {
    //       // console.log(index, '1错误')
    //       this.$set(this.testDiscount, index, false)
    //       Message.error('请输入0 - 9.9之间的数字')
    //       return false
    //     }
    //   }
    //   if (type === 'rebate') {
    //     reg = /^([1-9]\d|\d)$/
    //     const re = new RegExp(reg);
    //     if (re.test(item.rebate)) {
    //       this.$set(this.testRebate, index, true)
    //       // console.log(index, '2正确')
    //       return true
    //     } else {
    //       // console.log(index, '2错误')
    //       this.$set(this.testRebate, index, false)
    //       return false
    //     }
    //   }
    // },
    // 当选择第N个折扣或者返点添加数据项
    // vipGoodChange(item, index, type) {
    //   const i = this.prductForm.vipGoodsAttributes.findIndex(val => val.vipId === item.id)
    //   let json = {}
    //   console.log(item[type])
    //   if (i === -1) { // 查看是否vipGoodsAttributes有这个id
    //     // 如果没有,创建一个新的json， 最后安插到vipGoodsAttributes中

    //     json.vipId = item.id
    //     json[type] = item[type]
    //     this.prductForm.vipGoodsAttributes.push(json)
    //     // console.log(111111)
    //   } else {
    //     json = this.prductForm.vipGoodsAttributes[i]
    //     json[type] = item[type]
    //     // if (type === 'discount') json[type] = item[type] / 10
    //     // if (type === 'rebate') json[type] = item[type] / 100
    //     this.$set(this.prductForm.vipGoodsAttributes, i, json)
    //     // console.log(22222)
    //     // item[type] = item[type]
    //     // this.$set(this.momList, i, )
    //     // vue 下标不能直接赋值
    //     // json = this.prductForm.vipGoodsAttributes[i]
    //     // console.log('之前', json)
    //     // json[type] = item[type]
    //     // console.log('第', i, '个', json)
    //     // this.prductForm.vipGoodsAttributes[i][type] = item[type]
    //     // this.$set(this.prductForm.vipGoodsAttributes, i, {})
    //     // this.$set(this.prductForm.vipGoodsAttributes, i, json)

    //     // this.prductForm.vipGoodsAttributes[i][type] = item[type] // 如果有这个id 那么更新数据
    //   }
    //   console.log('第', i, '个的vip', this.prductForm.vipGoodsAttributes[i])
    // },
    // 获取折扣列表 所有折扣一致
    // getConstantPercent() {
    //   constantPercent().then(res => {
    //     if (res.code === '200') {
    //       this.discountList = res.data
    //     } else {
    //       Message.error(res.message)
    //     }
    //   })
    // },
    // 获取美妈类别
    // getMomList() {
    //   vipInfoAll().then(res => {
    //     if (res.code === '200') {
    //       this.momList = res.data
    //       this.momList.forEach((item, index) => {
    //         this.testDiscount[index] = true
    //         this.testRebate[index] = true
    //       })
    //     } else {
    //       Message.error(res.message)
    //     }
    //   })
    // },
    // 轮播图添加图片
    addImg(formName) {
      this.$refs[formName].validate((valid) => {
        console.log(valid)
        if (valid) {
          this.prductForm.goodsGalleryPojos.push(this.imgsCurData)
          this.imgsCurData = {}
          this.isUpload = true
          this.lbImgPath = ''
        } else {
          this.validateError()
          return false;
        }
      });
    },
    // 上移、下移
    move(index, type) {
      if (this.prductForm.goodsGalleryPojos !== null && this.prductForm.goodsGalleryPojos.length) {
        if (index === 0 && type === 'up') return Message.error('第一个无法上移')
        if (index === this.prductForm.goodsGalleryPojos.length - 1 && type === 'down') return Message.error('最后一个无法下移动')
        const obj = this.prductForm.goodsGalleryPojos.splice(index, 1)
        if (type === 'up') this.prductForm.goodsGalleryPojos.splice(index - 1, 0, obj[0])
        if (type === 'down') this.prductForm.goodsGalleryPojos.splice(index + 1, 0, obj[0])
      }
    },
    // 轮播图删除
    deleteFn(index) {
      this.$confirm('确定删除此商品轮播图？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.prductForm.goodsGalleryPojos.splice(index, 1)
      })
    },
    request(data) {
    //   data.startDate = new Date(data.startDate).getTime();
    //   data.endDate = new Date(data.endDate).getTime();
      // this.dataToCode(data)
      this.isEdit ? editRoom(data).then(response => {
        if (Number(response.code) === 200) {
          Message.success('编辑成功')
          this.$router.go(-1);
        } else {
          Message.error(response.message + '-' + response.data)
        }
      }) : addRoom(data).then(response => {
        if (Number(response.code) === 200) {
          Message.success('新增成功')
          this.$router.push('indexRoom');
        } else {
          Message.error(response.message + '-' + response.data)
        }
      });
    },
    getProductListFn(id) {
      const obj = { id }
      console.log(obj)
      checkRoomInfo(obj).then(res => {
        if (res.code === '200') {
          console.log('编辑/查看', res)
          this.prductForm = res.data
          if (this.isEdit || this.formDis) {
            getRoomListType(this.listQuery).then(res => {
              if (res.code === '200') {
                this.categoryList = res.data.list
                console.log('获取可用房型列表:', this.categoryList) // 获取可用房型列表
                console.log('房型id:', this.prductForm.roomTypeId) // 编辑/查看 中的 房型id
                const isRoomTypeArr = this.categoryList.filter(item => item.id === this.prductForm.roomTypeId)
                console.log('这个id是否被停用？', isRoomTypeArr)
                if (isRoomTypeArr.length > 0) {
                  console.log('没有被停用')
                } else {
                  console.log('已经被停用了')
                  this.prductForm.roomTypeId = ''
                  if (this.isEdit) Message.error('此房型已经被停用， 请重新选择房型类型')
                }
              }
            })
          }
        } else {
          Message.error(res.message + res.data)
        }
      })
    },
    // dataToHtml(query) {
    //   query.cPlan = this.changeToHtml(query.cPlan)
    //   query.costDesc = this.changeToHtml(query.costDesc)
    //   query.precautions = this.changeToHtml(query.precautions)
    // },
    // dataToCode(data) {
    //   data.cPlan = this.changeToCode(data.cPlan)
    //   data.costDesc = this.changeToCode(data.costDesc)
    //   data.precautions = this.changeToCode(data.precautions)
    // },
    // changeToCode(str) {
    //   return str.replace(/\r\n|\r|\n/g, '<br/>')
    // },
    // changeToHtml(str) {
    //   return str.replace(/<br\s*\/?>/g, '\n')
    // },
    // getTeacherList() {
    // //   getTeacherList(this.listQuery).then(response => {
    // //     this.teacher = response.data.list
    // //     console.log(this.teacher.length)
    // //     this.selectShow = true
    // //   })
    // },
    //     export function deepHandle(arr1, arr2) {
    // //   console.log('*****************')
    // //   console.log(arr1)
    // //   console.log(arr2)
    // //   console.log('*****************')
    //   const list = [];
    //   if (!Array.isArray(arr1)) return list;
    //   if (!Array.isArray(arr2)) return list;
    //   for (let i = 0; i < arr1.length; i++) {
    //     for (let j = 0; j < arr2.length; j++) {
    //     //   console.log(arr1[i].name + '1')
    //     //   console.log(arr2[j].name + '2')
    //       if (arr1[i].name === arr2[j].name) {
    //         arr1[i].id = arr2[j].id
    //         arr1[i].uid = arr2[j].uid
    //         if (arr1[i].children) arr1[i].alwaysShow = true
    //         arr1[i].hidden = false;
    //         // && arr2[j].permissions
    //         if (arr1[i].children && arr2[j].permissions) {
    //           arr1[i]['children'] = deepHandle(arr1[i].children, arr2[j].permissions)
    //         }
    //         list.push(arr1[i])
    //       }
    //     }
    //   }
    //   return list
    // }
    // findSubmitData(nowVal, oldVal) {
    // //   const aProps = Object.getOwnPropertyNames(newVal)
    // //   const bProps = Object.getOwnPropertyNames(oldVal)
    // //   console.log('aProps', aProps)
    //   const json = {}
    //   for (const key in oldVal) {
    //     if (nowVal[key] !== oldVal[key]) {
    //       json[key] = nowVal[key]
    //       console.log(key + `改变了,新值为` + nowVal[key])
    //       console.log('==================================')
    //       // console.log(key + `改变了,旧值为` + oldVal[key])
    //     }
    //     if (typeof nowVal[key] === 'object') {
    //       this.findSubmitData(nowVal, oldVal)
    //     }
    //   }
    //   console.log(json)
    //   return json
    // },

    toEdit() {
      editRoom(this.prductForm).then(res => {
        console.log(res)
        if (res.code === '200') {
          Message.success('更新成功')
          this.$router.go(-1)
        }
      })
      //   this.findSubmitData(this.prductForm, this.myProduct)
      console.log(this.myProduct.name)
      console.log(this.prductForm.name)
    },
    // 判断选择会员折扣 和 复利返点中， 如果点击支持则没有选择的校验
    // hasDR(obj, isDR, type) {
    //   const myarr = []
    //   console.log(obj[isDR])
    //   if (obj[isDR] === 1) {
    //     console.log()
    //     obj.vipGoodsAttributes.forEach(item => {
    //       if (item[type]) {
    //         myarr.push(item[type])
    //       }
    //     })
    //     return myarr.length === 0
    //   }
    // },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // console.log(this.prductForm.picUrl)
          if (!this.prductForm.picUrl) {
            Message.error('请添加缩略图片')
            return false
          }

          if (!this.prductForm.goodsGalleryPojos.length) {
            Message.error('请添加轮播图片')
            return false
          }
          if (this.prductForm.refundType === 1 && this.prductForm.refundDay === '') {
            Message.error('请填写天数')
            return false
          }
          if (this.prductForm.refundType === 1 && this.prductForm.refundHour === '') {
            Message.error('请选择几点前可退款')
            return false
          }

          if (this.prductForm.refundDay) {
            const reg = /^([1-9]\d|\d)$/.test(this.prductForm.refundDay)
            console.log(reg)
            if (!reg) {
              Message.error('入住当天请输入正整数')
              return false
            }
          }
          //   console.log('是否支持：', this.prductForm.refundType)
          //   console.log('邮费：', this.prductForm.postage)
          //   if (this.prductForm.refundType === 1 && this.prductForm.postage === '') {
          //     Message.error('请填写退款时间')
          //     return false
          //   }

          // isDiscount: 1, // 是否有会员折扣  0：不支持  1：支持
          // isMemberRebate: 1, // 会员复利返点 0：不支持  1：支持
          //   console.log('会员是否有错误:', this.hasDR(this.prductForm, 'isDiscount', 'discount'))
          //   console.log('复利返点是否错误:', this.hasDR(this.prductForm, 'isMemberRebate', 'rebate'))
          //   const isDis = this.hasDR(this.prductForm, 'isDiscount', 'discount')
          //   const isReb = this.hasDR(this.prductForm, 'isMemberRebate', 'rebate')

          //   if (isDis) {
          //     Message.error('请填写会员折扣')
          //     return false
          //   }

          //   if (isReb) {
          //     Message.error('请填写会员复利返点')
          //     return false
          //   }

          console.log(this.prductForm.tips)

          // return false

          //   const everyD = this.testDiscount.every((item) => {
          //     return item
          //   })
          //   if (!everyD) {
          //     this.testDiscount.forEach((item, index) => {
          //       if (!item) {
          //         this.$message({
          //           duration: 3000,
          //           message: '会员折扣:' + this.momList[index].name + '折扣请输入 0 ～ 9.9之间的数字， 小数点后保留1位数',
          //           type: 'error'
          //         })
          //         return false
          //       }
          //     })
          //     return false
          //   }

          //   const everyR = this.testRebate.every((item) => {
          //     return item
          //   })
          //   if (!everyR) {
          //     this.testRebate.forEach((item, index) => {
          //       if (!item) {
          //         this.$message({
          //           duration: 3000,
          //           message: '会员复利返点:' + this.momList[index].name + '折扣请输入 0 ～ 99之间的数字， 小数点后保留1位数',
          //           type: 'error'
          //         })
          //         return false
          //       }
          //     })
          //     return false
          //   }
          // alert(1111)
          // console.log('折扣最后的判断为：', everyD)

          //   if (this.prductForm.postage) {
          //     const reg = /^[0-9]+(.[0-9]{0,2})?$/.test(this.prductForm.postage)
          //     console.log(reg)
          //     if (!reg) Message.error('邮费:请输入正确的邮费数字，并且小数点后最多保留两位数字')
          //     return false
          //   }
          // let vip = this.prductForm.vipGoodsAttributes
          // 进来的数据x10， 出去的时候 除以10
          // vip = this.restoreDR(vip)
          // 进来的数据x100， 出去的时候 除以100
          // if (this.prductForm.saleRebate) this.prductForm.saleRebate = this.prductForm.saleRebate / 100
          // console.log(this.prductForm)
          this.request(this.prductForm)
        } else {
          this.validateError()
          return false;
        }
      });
    },
    textCounter() {
      console.log(111111)
    //   if (value.length > maxLimit) {
    //     Message.error('不能超过', maxLimit, '个字')
    //   }
    },
    resetForm(formName) {
    //   this.$store.dispatch('resetFunc').then(() => {
    //   }).catch((err) => {
    //     Message.error(err.err)
    //   })
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove(file, fileList) {
      console.log('file:::', file)
      console.log('fileList:::', fileList)
      if (file && file.status === 'success') {
        return this.$confirm(`确定移除 ${file.name}？`, {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // let index = fileList
          console.log()
        })
      }
    },
    beforeAvatarUpload(file) {
      const isPNG = file.type === 'image/png'
      const isJPEG = file.type === 'image/jpeg'
      const isJPG = file.type === 'image/jpg'
      const isGIF = file.type === 'image/gif'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isPNG && !isJPEG && !isJPG && !isGIF) {
        this.$message.error('上传头像图片只能是 jpg、png、jpeg、gif 格式!')
        return false
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
        return false
      }
      // this.uploadData.key = `upload_pic_${new Date().getTime()}_${file.name}`
      console.log('beforeAvatarUpload:', file)
    },
    beforeAvatarUploadLbImg(file) {
      const isPNG = file.type === 'image/png'
      const isJPEG = file.type === 'image/jpeg'
      const isJPG = file.type === 'image/jpg'
      const isGIF = file.type === 'image/gif'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isPNG && !isJPEG && !isJPG && !isGIF) {
        this.$message.error('上传头像图片只能是 jpg、png、jpeg、gif 格式!')
        return false
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
        return false
      }
      // this.uploadData.key = `upload_pic_${new Date().getTime()}_${file.name}`
    },
    clearPic() {
      this.$confirm('确定删除此图吗？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.prductForm.picUrl = ''
        this.$refs.picUpload.clearFiles()
      }).catch(() => {})
    },
    change(type, file, fileList) {
      this.isUpload = true
      console.log('fileList:::', fileList)
      console.log('config.ImgUrl:::', config.ImgUrl)
      if (Number(fileList.response.code) === 200) {
        let obj;
        switch (type) {
          case 'coverImg': // 缩略图
            // obj = {
            //   coverImg: config.ImgUrl + fileList.response.data
            // };
            this.fileList1 = []
            if (fileList.response.code === '200') {
              this.prductForm.picUrl = fileList.response.data.url
              // this.picUrlCurPath = fileList.url
            }
            break;
          case 'lbImg': // 轮播图
            obj = {
              posterImg: config.ImgUrl + fileList.response.data
            };
            this.isUpload = false
            this.imgsCurData.url = fileList.response.data.url
            this.lbImgPath = fileList.response.data.url
            // this.imgsCurData.curPath = fileList.url
            break;
        }
        Message.success('图片已上传')

        // this.$store.dispatch('addListenerCoverImg', obj).then(() => {
        //   Message.success('图片上传成功')
        // }).catch((err) => {
        //   Message.error(err.err)
        // })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
    .fl{
        float: left;
    }
    .fr {
        float: right
    }
    hr{
        border: none;
        border-top: 1px solid #ddd;
        margin: 30px 0;
    }
    .title{
        margin: 30px;
        color:#333;

    }
    .el-table__header tr,
    .el-table__header th {
        padding: 0;
        height: 30px !important;
    }
    .el-table__body tr,
    .el-table__body td {
        padding: 0 !important;
        height: 30px !important;
    }
    .el-table td, .el-table th {
        padding: 0 !important;
    }
    .tipBox{
        margin-top: 40px;
        margin-left: 10px;
    }
    .thumbnail{
        width: 302px;
        height: 200px;
        border: 1px solid #eee;
        border-radius: 5px;
        display: flex;
        // flex-item-align: center;
    }

    .thumbnail img{
        width: 100% ;
    }
    .uploadBox{
        width: 100%;
        position: relative;
    }
    .btn_clear{
        position: absolute;
        bottom: -38px;
        right: 0;
        padding: 10px 30px;
    }

    .productName{
        width:300px
    }

    .table{
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
    }
    .table td{
        border: 1px solid #ddd;
        padding: 5px 10px;
    }

  .tip {
    color: red;
  }
  .tin_box {
    border: 1px solid #ddd;
    padding: 0 10px 0 10px;
    color:#666;
  }
  .line{
    text-align: center;
  }
  .el-upload-list, .el-form-item__content{
        display: none;
    }
    .el-upload-list{
        width: 50px;
        overflow: hidden;
    }

    .discontIpt{
        width:58%
    }

    .redBroder {
        border: 1px solid red;
        box-sizing: border-box;
        border-radius: 4px;
        transition: all .5s;
    }

    .lbImgCon{
        width:60px;
        height: 40px;
        border: 1px dashed #ddd;
        margin-top: -4px;
    }

    .lbImgPath{
        display: inline-block;
        width: 100%;
        height: 100%;
    }
    .lbImgBox{
        width:146px;
        overflow: hidden;
        vertical-align: top;
        padding-top: 4px;
    }
    .lbTitle{
        margin: 0 0 40px 4.5%;
        line-height: 50px;
        color:#606266;
        font-size: 14px;
        font-weight: 700;
    }
    .bottomDiv{
        padding:0 0 20px 11%;
    }

    .timeNum{
        width: 100px;
    }
</style>
